<template>
  <el-form :model="form" label-width="70px" class="vitaeForm">
    <!-- 姓名 -->
    <el-form-item label="姓名">
      <el-input v-model="form.name" placeholder="您的姓名" />
    </el-form-item>

    <!-- 应聘岗位 -->
    <el-form-item label="应聘岗位">
      <el-input v-model="form.job_name" placeholder="您计划投递的岗位" />
    </el-form-item>

    <!-- 性别 -->
    <el-form-item label="性别">
      <el-radio-group v-model="form.sex">
        <el-radio :label="1">男</el-radio>
        <el-radio :label="0">女</el-radio>
      </el-radio-group>
    </el-form-item>

    <!-- 出生日期 -->
    <el-form-item label="出生日期">
      <el-col>
        <el-date-picker width="100%" v-model="form.birth" type="date" placeholder="出生日期" style="width: 100%" />
      </el-col>
    </el-form-item>

    <!-- 籍贯 -->
    <el-form-item label="籍贯">
      <el-cascader style="width: 100%;" placeholder="您的籍贯所在地" v-model="form.address" :options="provinceAndCityData">
      </el-cascader>
    </el-form-item>

    <!-- 联系电话 -->
    <el-form-item label="联系电话">
      <el-input v-model="form.phone" placeholder="您的联系电话" />
    </el-form-item>

    <!-- 联系邮箱 -->
    <el-form-item label="联系邮箱">
      <el-input v-model="form.email" placeholder="您的联系邮箱" />
    </el-form-item>

    <!-- 技能描述 -->
    <el-form-item label="技能描述">
      <el-input v-model="form.job_skill" type="textarea" />
    </el-form-item>

    <!-- 工作经验 -->
    <el-form-item label="工作经验">
      <el-input v-model="form.work_experience" type="textarea" />
    </el-form-item>

    <!-- 提交按钮 -->
    <div class="submit">
      <el-button @click="postVitaeData" type="primary" round size="large">保存简历</el-button>
    </div>
  </el-form>
</template>

<script setup>
import { ref,watch,inject } from 'vue'
import { useRouter } from 'vue-router'
import checkLoginStatus from '@/hooks/checkLoginStatus.js'
import login from '@/hooks/login.js'
//导入中国地区数据包
import { provinceAndCityData } from "element-china-area-data";
const $axios = inject('$axios')
const $root = inject('$root')
const router = useRouter()
const form = ref({
  name: "",                   //姓名
  job_name: "",               //应聘岗位
  sex: 1,                     //性别
  birth: "",                  //生日
  address: [],                //地址
  phone: "",                  //电话
  email: "",                  //邮箱
  job_skill: "",              //技能描述
  work_experience: "",        //工作经验
})

const postVitaeData = () => {
  const rid = router.currentRoute.value.params.id
  if (rid) {
    //更新简历
    updateVitaeData(rid)
  }
  else{
    //新增简历
    addVitaeData()
  }
}

const updateVitaeData = (rid)=>{
  $axios.post($root+`/curri/update/+${rid}/` ,form.value)
  .then(r=>{
    if(r.data.code==200){
      ElMessage('简历更新成功')
      return
    }
    else{
      ElMessage('简历更新失败')
      return
    }
  })
}

const addVitaeData = ()=>{
  form.value.address = form.value.address.join('-')
  $axios.post($root+`/curri/`,form.value)
  .then(r=>{
    if(r.data.code == 200 ){
      ElMessage('简历添加成功')
      return
    }
    else{
      ElMessage.error('简历添加失败')
      return
    }
  })
}

const getVitaeDetail = () => {
  form.value = {}
  const rid = router.currentRoute.value.params.id
  if (rid) {
    $axios.get($root + `/curri/${rid}/`)
      .then(r => {
        form.value = r.data.data
        form.value.work_experience = form.value.work_experience.replace(/\\n/g, '\r')
      })
  }
}

watch(() => router.currentRoute.value.name, (name) => {
  if (name == "addvitae") {
    checkLoginStatus(getVitaeDetail, login)
  }
}, { immediate: true, deep: true })
</script>

<style scoped>
.vitaeForm {
  width: 85%;
  margin: 15px auto 0 auto;
}
</style>
